<template>
    <div class="app-body">
        <section class="swiper-section">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in banners">
                        <a :href="item.url">
                            <img :src="item.cover"/>
                        </a>
                    </div>
                </div>
                <div class="swiper-pagination swiper-pagination-white"></div>
            </div>
        </section>
        <div class="nav-box">
            <ul>
                <li class="nav-item" v-for="item in categories">
                    <router-link :to="{path:'/category/'+item.id}">
                        <i :class="item.icon"></i>
                        <p>{{item.name}}</p>
                    </router-link>
                </li>
            </ul>
        </div>
        <div class="sg-list">
            <div class="sg-list-header">
                <p class="sg-list-title">每日精选</p>
            </div>

            <ul>
                <li v-for="item in goodsList">
                    <router-link :to="{path:'/detail/'+item.id}">
                        <div class="img">
                            <img class="sg-img-responsive" :src="item.cover"/>
                        </div>
                        <div class="info">
                            <p class="name">{{item.name}}</p>

                            <div v-if="item.coupon_status > 0" class="original-price">
                                <s>原价：￥{{item.price}}</s>
                            </div>
                            <div class="" style="position: relative">
                                <span class="price">￥{{item.coupon_price}}</span>
                                <img v-if="item.coupon_status > 0" style="position: absolute;left: 5rem;width: 3rem" src="images/coupon_price.png">
                                <span class="volume">销量    {{item.volume}}</span>
                            </div>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
        <div class="footer">
            <ul>
                <li class="active">
                    <i class="iconfont icon-12"></i>
                    <p>首页</p>
                </li>
                <li>
                    <i class="iconfont icon-12"></i>
                    <p>分类</p>
                </li>
                <li>
                    <router-link :to="{path:'/coupon/search'}">
                        <i class="iconfont icon-search"></i>
                        <p>找券</p>
                    </router-link>
                </li>
                <li>
                    <i class="iconfont icon-Head"></i>
                    <p>我的</p>
                </li>
            </ul>
        </div>
    </div>

</template>

<script>
    import Swiper from 'swiper';
    import 'swiper/dist/css/swiper.min.css';
    export default {
        data(){
            return {
                banners:[],
                categories:[],
                goodsList:[],

            }
        },
        mounted() {

            this.getBanner();
            this.getCategories();
            this.getGoodsList();
            document.setTitle('首页');
        },
        methods:{
            initSwiper(){
                var swiper = new Swiper('.swiper-container', {
                    pagination: '.swiper-pagination',
                    paginationClickable: true,
                    loop: true,
                    speed: 600,
                    autoplay: 4000,
                    onTouchEnd: function() {
                        swiper.startAutoplay()
                    }
                });
            },
            getBanner(){
                let that                    =   this;
                this.api.get('api/ad/banner').then(function(response){
                    if(response.status==200){
                        for(var i in response.data) {
                            that.banners.push(response.data[i]);
                        }
                        that.initSwiper();

                    }
                });
            },
            getCategories(){
                let that                    =   this;
                this.api.get('api/category/children').then(function(response){
                    if(response.status==200){
                        for(var i in response.data) {
                            that.categories.push(response.data[i]);
                        }
                    }
                });
            },
            getGoodsList(){
                let that                    =   this;
                this.api.get('api/goods/new',{size:6}).then(function(response){
                    if(response.status==200){
                        for(var i in response.data.data) {
                            that.goodsList.push(response.data.data[i]);
                        }
                    }
                });
            }
        }
    }
</script>
